<!--
 * @Author: FanWeiHua
 * @Date: 2021-07-27 11:46:34
 * @LastEditTime: 2021-08-03 11:39:25
 * @Description: 操作页
-->
<template>
  <a-layout class="handle-layout">
    <a-layout-sider class="handle-layout-left" v-model="collapsed" :trigger="null" collapsible width="160">
      <div class="logo" />
      <a-menu class="menu" theme="dark" mode="inline" :selectedKeys="[...curMenuKey]">
        <a-menu-item v-for="menu in menus" :key="menu.key" @click="onMenuEvent(menu)">
          <a-icon :type="menu.icon" />
          <span>{{ menu.name }}</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout class="handle-layout-content">
      <a-layout-header><label class="title">要情指令系统</label></a-layout-header>
      <a-layout-content class="content">
        <a-button type="primary"> Primary </a-button>
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import { logo } from '@path/common/server/iconServer.js';
import menus from './menus.js';
export default {
  data() {
    return {
      collapsed: true,
      logo,
      menus,
      curMenuKey: []
    };
  },
  methods: {
    /**
     * 菜单事件
     */
    onMenuEvent({ key }) {
      const keyIndex = this.curMenuKey.findIndex(item => item === key);
      if (keyIndex > -1) {
        this.curMenuKey.splice(keyIndex, 1);
      } else {
        this.curMenuKey.push(key);
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import './index.less';
</style>
